<template>
	<view class="detail">
        <SRV-topbar title="搜索" messageNum='0' isLeft='true'></SRV-topbar>
		<view class="top">
            <!-- <picker class="cheleft" @change="bindPickerChange" :value="selSearchType" :range="searchTypeList" :data-key="index">
                <view class="item">{{searchTypeList[selSearchType]}}<uni-icons type="arrowdown" size="15" color="#999" style="margin-left: 10upx;" /></view>
            </picker> -->
			<uniSearchBar :placeholder="placeholderTxt" radius="36" cancelButton="none" v-model="keywords" searchWidth="500rpx"></uniSearchBar>
			<label @click="searchFun()">搜索</label>
		</view>
		<view>
			<view class="line" v-if="searchLogList.length > 0">
				<p>
					<label>搜索记录</label>
					<span @click="cleanSearch()">
						<i></i>
						<b>消除记录</b>
					</span>
				</p>
				<view class="lbls l1">
					<label v-for="(item,index) in searchLogList" :key="index" @click="searchThisFun(item.keywords)">{{item.keywords}}</label>
				</view>
			</view>
			<view class="line">
				<p><label>热门搜索</label></p>
				<view class="lbls">
					<label v-for="(item,index) in hotSearchList" :key="index" class="hot" @click="searchThisFun(item.keywords)">{{item.keywords}}</label>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				keywords: {
					value: '',
				},
                searchTypeList: ['产品', '商家'],
                selSearchType: 0,
				placeholderTxt: '请输入关键词搜索',
				searchLogList: [],
				hotSearchList: [],
			}
		},
		methods: {
            bindPickerChange: function(e) {
                let val = e.target.value;
                _self.selSearchType = val;
            },
			getList() {
				serve.request({
                    url: '/store/index/search',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v2'
                }).then(res => {
                    console.info(res.data);
                    _self.searchLogList = res.data.searchLogList;
                    _self.hotSearchList = res.data.hotSearchList;
                });
			},
			searchFun() {
				if (_self.keywords.value == "") {
					uni.showToast({
						title: '请填写搜索关键词',
						icon: 'none'
					});
					return;
				}
				// serve.request({
				//     url: '/store/index/add-search',
				//     data: {
				//         appkey: uni.getStorageSync('appkey'),
				//         'access-token': uni.getStorageSync('access-token'),
    //                     keywords: _self.keywords.value
				//     },
				//     v: '/v2'
				// }).then(res => {
    //                 let redirectToUrl = '/pages/index/index';
    //                 if(_self.selSearchType == 0) {
                    let    redirectToUrl = '/pages/store/productList?keywords='+_self.keywords.value;
                    // }
				    uni.navigateTo({
				        url:redirectToUrl
				    });
                    return ;
				// });
			},
			cleanSearch() {
				uni.showModal({
					title: '提示',
					content: '您确定清楚搜索日志吗',
					success: function(res) {
						if (res.confirm) {
							serve.request({
                                url: '/store/index/del-search',
                                data: {
                                    appkey: uni.getStorageSync('appkey'),
                                    'access-token': uni.getStorageSync('access-token'),
                                },
                                v: '/v2'
                            }).then(res => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                });
                                if (res.code == 200) {
                                    _self.searchLogList = [];
                                }
                            });
						}
					}
				});
			},
            searchThisFun(keyword) {
                let redirectToUrl = '/pages/index/index';
                if(_self.selSearchType == 0) {
                    redirectToUrl = '/pages/store/productList?keywords='+keyword;
                }
                uni.navigateTo({
                    url:redirectToUrl
                });
                return ;
            },
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
            _self = this;
			_self.keywords.value = options.keywords || "";
            _self.getList();
		}
	};
</script>
<style lang="scss" scoped>
	.detail {
		.top {
			padding: 48rpx 30rpx 48rpx;
			display: flex;
			align-items: center;
			color: #3333ff;
        	border-bottom: 8upx #b1b1b3 solid;
			label {
				font-size: 32rpx;
				margin-left: 47rpx;
			}
		}
		.line {
			padding: 24rpx;
			p {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 27rpx;
				span {
					font-size: 24rpx;
					color: #cccccc;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					b {
						font-weight: normal;
					}
					i {
						display: block;
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
						background: url(https://hdsq.aoorange.cn/attachment/xcx/index/icon_del.png);
						background-size: 100% auto;
					}
				}
			}
			.lbls {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				label {
					padding: 0 50rpx;
					height: 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #f5f5f5;
					border-radius: 36rpx;
					font-size: 28rpx;
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					color: #999999;
					margin: 0 20rpx 10rpx 0;
				}
				.hot {
					&::before {
						content: "";
						width: 22rpx;
						height: 22rpx;
						margin-right: 6rpx;
						display: block;
						background: url(https://hdsq.aoorange.cn/attachment/xcx/index/hot.png);
						background-size: 100% auto;
					}
				}
			}
			.l1 {
				label {
					min-width: 220rpx;
					box-sizing: border-box;
					&:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
